(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "react"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const React = require("react");
    let isIOS = navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0;
    class Panel extends React.Component {
        constructor(props) {
            super(props);
        }
        get element() {
            return this.panel;
        }
        show(from) {
            let header = this.header; //this.refs['header'] as HTMLElement;
            let body = this.body; //this.refs['body'] as HTMLElement;
            let footer = this.footer; //this.refs['footer'] as HTMLElement;
            let panel = this.panel; //this.refs['panel'] as HTMLElement;
            let modal = this.modal; //this.refs['modal'] as HTMLElement;
            let backdrop = this.backdrop; //this.refs['backdrop'] as HTMLElement;
            this.element.style.removeProperty('display');
            panel.style.display = 'block';
            modal.style.display = 'block';
            window.setTimeout(() => {
                modal.style.transform = 'translateX(0)';
                backdrop.style.opacity = '0.5';
            }, 50);
            console.assert(header != null && body != null && footer != null);
            let setBodyHeight = () => {
                let headerHeight = header.getBoundingClientRect().height;
                let footerHeight = footer.getBoundingClientRect().height;
                let bodyHeight = window.innerHeight - headerHeight - footerHeight;
                body.style.height = `${bodyHeight}px`;
            };
            window.addEventListener('resize', () => setBodyHeight());
            setBodyHeight();
        }
        hide() {
            this.modal.style.removeProperty('transform');
            this.backdrop.style.opacity = '0';
            window.setTimeout(() => {
                this.panel.style.display = 'none';
            }, 500);
        }
        componentDidMount() {
            //=====================================================================
            // 点击非窗口区域，关窗口。并禁用上级元素的 touch 操作。
            let panel = this.panel; //this.refs['panel'] as HTMLElement;
            let modalDialog = this.modalDialog; //this.refs['modalDialog'] as HTMLElement;
            panel.addEventListener('touchstart', (event) => {
                let dialogRect = modalDialog.getBoundingClientRect();
                for (let i = 0; i < event.touches.length; i++) {
                    let { clientX } = event.touches[i];
                    if (clientX < dialogRect.left) {
                        this.hide();
                        return;
                    }
                }
            });
            if (isIOS) {
                panel.addEventListener('touchstart', (event) => {
                    let tagName = event.target.tagName;
                    if (tagName == 'BUTTON' || tagName == 'INPUT' || tagName == 'A') {
                        return;
                    }
                    event.stopPropagation();
                    event.preventDefault();
                });
            }
        }
        render() {
            return React.createElement("div", { ref: (o) => this.panel = o || this.panel, className: "product-panel", style: { display: 'none' } },
                React.createElement("div", { ref: (o) => this.modal = o, className: "modal" },
                    React.createElement("div", { ref: (o) => this.modalDialog = o, className: "modal-dialog" },
                        React.createElement("div", { className: "modal-content" },
                            this.props.header ?
                                React.createElement("div", { ref: (o) => this.header = o, className: "modal-header" }, this.props.header)
                                : null,
                            this.props.body ?
                                React.createElement("div", { ref: (o) => this.body = o, className: "modal-body" }, this.props.body)
                                : null,
                            this.props.footer ?
                                React.createElement("div", { ref: (o) => this.footer = o, className: "modal-footer" }, this.props.footer)
                                : null))),
                React.createElement("div", { ref: (o) => this.backdrop = o, className: "modal-backdrop in" }));
        }
        render1() {
            return React.createElement("div", { ref: "panel", className: "product-panel" },
                React.createElement("div", { ref: "modal", className: "modal" },
                    React.createElement("div", { ref: "modalDialog", className: "modal-dialog" },
                        React.createElement("div", { className: "modal-content" },
                            React.createElement("div", { ref: "header", className: "modal-header" }, this.props.header),
                            React.createElement("div", { ref: "body", className: "modal-body" }, this.props.body),
                            React.createElement("div", { ref: "footer", className: "modal-footer" }, this.props.footer)))),
                React.createElement("div", { ref: "backdrop", className: "modal-backdrop in" }));
        }
    }
    exports.Panel = Panel;
});
